<template>
  <div>
	  
	  <!-- <iframe src="https://mobile.pinduoduo.com/" style="width: 300px;height: 500px;"></iframe> -->
	  <button @click="openOperate">打开自动化操作 </button>
	  
	<a-row type="flex">
		<a-col :flex="0" class="rows">uKey</a-col>
		<a-col :flex="6"><a-input v-model="uKey" @input="input1" placeholder="请输入用户Key" /></a-col>
	</a-row>
	<a-row type="flex rows2">
		<a-col :flex="0" class="rows">_api_key</a-col>
		<a-col :flex="6"><a-input v-model="apiKey" @input="input2" placeholder="请输入API Key" /></a-col>
	</a-row> 
	<a-row type="flex rows2">
		<a-col :flex="0" class="rows">文件路径</a-col>
		<a-col :flex="6"><a-input @change="inputChange"  @input="input3" v-model="filePath" placeholder="请输入文件路径" /></a-col>
	</a-row> 
	<a-row type="flex rows2">
		<a-col :flex="0" class="rows">微信对象名字</a-col>
		<a-col :flex="6"><a-input v-model="name"  @input="input4" placeholder="请输入微信对象名字" /></a-col>
	</a-row> 
    <div style="width: 100%;margin: 10px 0;align-items: center;display: flex;justify-content: flex-start;">
    	<div>
			<button @click="removeHistory" style="margin-right: 0;">一键删除记录</button>
		</div>
		<div style="display:flex;height: 100%;align-items: center;margin-left: 30px;">
			<span style="margin-right: 10px;">配置微信自动发送窗口</span>
			<a-switch :checked="wechatSwitch" @change="onChange" />
		</div>
	</div>
    <!-- dev调试时，action参数：请填写你本地完整的api地址，如：http://localhost:7068/api/v1/example/uploadFile -->
    <a-upload-dragger
		v-if="renderComponent"
		:data="{
			uKey:uKey,
			_api_key:apiKey
		}"
        name="file"
        :multiple="true"
        :action="action_url"
        @change="handleChange"
    >
        <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">
        单击或拖动文件到此区域以上传
        </p>
        <p class="ant-upload-hint">
        支持单次或批量上传。严禁上传公司资料或其他文件
        </p>
    </a-upload-dragger>

	 <!-- <a-card hoverable style="width: 240px">
      <img
        slot="cover"1
        alt="example"
        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
      />

    </a-card> -->
    <p/>
 		<!-- <button style="position: absolute;z-index: 111;" @click="dragMouse">拖动鼠标</button> -->
    <a-list v-if="image_info.length !== 0" size="small" bordered :data-source="image_info">
      <a-list-item style="text-align:left;" slot="renderItem" slot-scope="item">
        {{ item.id }}.&nbsp;{{ item.appQRCodeURL }}:&nbsp;
        <a :href="item.url" target="_blank">{{ item.url }}</a>
		<p>下载二维码</p>
		<img
		  :src="item.appQRCodeURL"
		/>
      </a-list-item> 
    </a-list>
  </div>
</template>
<script>
//import { uploadFile } from '@/api/main'

const { ipcRenderer } = window.require('electron');
// import reqwest from 'reqwest';

export default { 
  data() {
    return {
      // action_url: process.env.VUE_APP_API_BASE_URL + '/api/v1/example/uploadFile',
      action_url: 'https://upload.pgyer.com/apiv1/app/upload',
      image_info: [],
      num: 0,
	  uKey: "",
	  apiKey: "",
	  renderComponent: true,
	  filePath:'',
	  wechatSwitch:false,
	  name:'文件传输助手'
    };
  },
  mounted() {
	this.uKey = localStorage.getItem('uKey') 
	this.apiKey = localStorage.getItem('apiKey') 
	this.filePath = localStorage.getItem('filePath') 
	this.name = localStorage.getItem('name') 
	
	// ipcRenderer.send('loginClick',8)
	
	  
  	ipcRenderer.on('on-file-message', (event, arg) => {
  	//   var robot = require("robotjs");   //控制鼠标键盘等操作
	  // //移动鼠标
	  // robot.setMouseDelay(1000)
	  // robot.mouseClick();
	  //  //鼠标点击
	  // robot.moveMouseSmooth(screenSize.width-140, screenSize.height-560);
	  // robot.setMouseDelay(2000)
	  // robot.mouseClick()
	  // robot.moveMouseSmooth(screenSize.width-140, screenSize.height-490);
	  // robot.setMouseDelay(1000)
	  // robot.mouseClick()
  	}) 
  },
  methods: {
	  async openOperate() {
		  
		  ipcRenderer.send('openOperate',8)
		  
	  },
	 input1() {
		localStorage.setItem('uKey',this.uKey) 
	 },
	 input2() {
		localStorage.setItem('apiKey',this.apiKey) 
	 },
	 input3() {
		localStorage.setItem('filePath',this.filePath) 
	 },
	 input4() {
		localStorage.setItem('name',this.name) 
	 },
 	dragMouse() {
		ipcRenderer.send('dragMouse',this.name)
	},
	onChange() {
		this.wechatSwitch = !this.wechatSwitch
		// localStorage.setItem('isRouter','1')  
		// window.open(`http://localhost:9001/setting?type=1`,'newwindow', 'height=700, width=800, toolbar=no, menubar=no, resizable=yes, scrollbars=1, location=no, status=no')
		ipcRenderer.send('opn-win', this.filePath)
	},
	inputChange(e) {
		console.log(this.filePath)
		ipcRenderer.send('on-file-path', this.filePath)
	},
	removeHistory() {
		// 从 DOM 中删除 my-component 组件
		this.renderComponent = false;
		this.$nextTick(() => {
		  // 在 DOM 中添加 my-component 组件
		  this.renderComponent = true;
		});
	},
    handleChange(info) {
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file);
      }
      if (status === 'done') {
        // 去除list列表
        //info.fileList = [];
        const uploadRes = info.file.response;
        console.log('uploadRes:', uploadRes)
        if (uploadRes.code !== 0) {
          this.$message.error(`上传失败 ${uploadRes.code},${uploadRes.message}.`);
          return false;
        }
        this.num++;
        const picInfo = uploadRes.data;
        picInfo.id = this.num;
        picInfo.imageUrlText = 'image url';
        this.image_info.push(picInfo);
		if(this.wechatSwitch) {
			this.dragMouse()
		}
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    }
  }
};
</script>
<style>
	.rows {
		align-items: center;
		width: 100px;
		display: flex;
	}
	.rows2 {
		margin-bottom: 20px;
		margin-top: 10px;
	}
</style>
